/* 1. 变量 (Variables) */
@primary-color: #4a90e2;
@secondary-color: #50c878;
@base-font-size: 16px;
@card-width: 300px;

/* 2. 混合 (Mixins) */
.border-radius(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.box-shadow(@shadow: 0 2px 4px rgba(0,0,0,0.2)) {
    -webkit-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    box-shadow: @shadow;
}

/* 3. 嵌套规则 (Nested Rules) */
.card-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;

    /* 嵌套媒体查询 */
    @media (max-width: 768px) {
        flex-direction: column;
        align-items: center;
    }

    /* 4. 父选择器 (&) */
    .card {
        width: @card-width;
        padding: (@base-font-size * 1.5);
        .border-radius();
        .box-shadow();

        &.primary {
            background-color: @primary-color;
            color: white;

            /* 5. 运算 (Operations) */
            border: 1px solid darken(@primary-color, 10%);
        }

        &.secondary {
            background-color: @secondary-color;
            color: white;
            border: 1px solid darken(@secondary-color, 10%);
        }

        h2 {
            font-size: (@base-font-size * 1.5);
            margin-bottom: (@base-font-size / 2);

            /* 6. 内置函数 (Built-in Functions) */
            color: lighten(#ffffff, 10%);
        }

        p {
            font-size: @base-font-size;
            opacity: 0.9;
        }

        /* 7. 嵌套伪类 */
        .btn {
            padding: (@base-font-size / 2) @base-font-size;
            border: none;
            .border-radius(3px);
            cursor: pointer;
            background-color: fade(@primary-color, 80%);

            &:hover {
                background-color: darken(@primary-color, 10%);
                transform: translateY(-2px);
            }

            &:active {
                transform: translateY(0);
            }
        }
    }
}

/* 8. 导入 (Import) - 示例导入外部文件 */
@import (reference) "variables.less";

/* 9. 条件语句 (Guards) */
.generate-font-size(@size) when (@size > 12px) {
    font-size: @size;
}

/* 10. 循环 (Loops) */
.generate-sizes(@n, @i: 1) when (@i =< @n) {
    .size-@{i} {
        width: (@card-width / @n * @i);
    }
    .generate-sizes(@n, (@i + 1));
}

/* 使用循环生成不同大小 */
.generate-sizes(3);

/* 11. 字符串插值 */
@prefix: card;
.@{prefix}-header {
    margin-bottom: @base-font-size;
}

/* 12. 颜色函数 */
@base-color: #ff0000;
.complementary {
    background-color: complement(@base-color);
}